<template>
	<view class="uni-main">
		<use-table ref="tbl"></use-table>
		<div class="container padding_b_0">
			<div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">订单号：</div>
					<el-input v-model="req.trade_no" placeholder="请输入订单号" class="search_input" @change="search"
						clearable>
					</el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">手机号：</div>
					<el-input v-model="req.phone" placeholder="请输入手机号" class="search_input" @change="search" clearable>
					</el-input>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_b_20 margin_r_40"
					@click="search">搜索</el-button>
				<div class="search_advanced margin_b_20" @click="advancedSearch = !advancedSearch"
					v-if="!advancedSearch">高级筛选</div>
				<div class="search_common margin_b_20" @click="advancedSearch = !advancedSearch" v-if="advancedSearch">
					常用筛选</div>
			</div>
		</div>

		<div class="container last_container use-table">
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row>
				<el-table-column property="recharge_status_text" label="充值状态" align="center"></el-table-column>
				<el-table-column property="mobile" label="手机号码" align="center"></el-table-column>
				<el-table-column label="运营商" align="center" width="200">
					<template scope="scope">
						{{getMobileType(scope.row.mobile_type,scope.row.mobile)}}
					</template>
				</el-table-column>
				<el-table-column property="trade_no" label="支付宝订单号" align="center">
				</el-table-column>
				<el-table-column property="total_money" label="充值金额" align="center">
				</el-table-column>
				<el-table-column label="支付时间" align="center" width="200">
					<template scope="scope">
						<uni-dateformat :date="scope.row.create_time" :format="'yyyy-MM-dd hh:mm:ss'" />
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
			<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
				@current-change="currentChange"></el-pagination>
		</div>
	</view>
</template>

<script>
	const db = uniCloud.database()
	let isChinaMobile = /^1(3[4-9]|5[012789]|8[23478]|4[478]|7[28]|9[578])\d{8}$/; //移动
	let isChinaUnion = /^1(3[0-2]|4[5]|5[56]|6[67]|7[156]|8[56]|9[6])\d{8}$/; //联通
	let isChinaTelcom = /^1(3[3])|(8[019])|(5[3])|(7[37])|(9[0139])\d{8}$/; //电信
	const __name = 'wmz-entitlement-recharge';
	let _this;
	export default {
		data() {
			return {
				advancedSearch: false,
				req: {
					page: 1,
					rows: 10,
					orderby: 'create_time desc',
					phone: '',
					trade_no: '',
					status: '已退款'
				},
				tblHeight: 0,
				tableLoading: false,
				tableDatas: [],
				tableTotal: 0,
				selectDatas: [],
				searchBtnLoading: false,
				removesBtnLoading: false,
				sortLastTime: null,
			};
		},
		onLoad() {
			_this = this
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path);
			if (__search) {
				this.req = __search;
			}

			this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
			this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;

			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path);
				});
			});
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path);
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		},
		methods: {
			search() {
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path,
					data: this.req
				});
			},
			currentChange(current) {
				this.$api.storagePaginationPage(current, this.$route.path);
				this.req.page = current;
			
				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			},
			async loadData(clear = true) {
				this.tableLoading = true;

				await this.$db[__name]
					.whereif(this.req.phone, {
						phone: new RegExp(this.$api.filterRegexpKey(this.req.phone), 'i')
					})
					.whereif(this.req.status, {
						status: this.req.status
					})
					.whereif(this.req.trade_no, {
						trade_no: this.req.trade_no
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;

							if (typeof callback === 'function') {
								callback();
							}
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			}, 
			getMobileType(mobile_type, mobile) {
				if (!mobile_type) {
					if (isChinaMobile.test(mobile)) {
						return '中国移动'
					} else if (isChinaUnion.test(mobile)) {
						return '中国联通'
					} else if (isChinaTelcom.test(mobile)) {
						return '中国电信'
					}
				}
				return mobile_type;
			},
		}
	};
</script>